import React, { useEffect, useState } from "react";
import { List, PullToRefresh, InfiniteScroll } from "antd-mobile";
import { AddCircleOutline, ClockCircleOutline } from "antd-mobile-icons";
import http from "../../utils/http";
import { useSelector } from "react-redux";
import { List as VirtualizedList, AutoSizer } from "react-virtualized"; 
import { useNavigate } from "react-router-dom";
function TableList() {
    const citySlice = useSelector((state) => state.citySlice);
    const [list, setList] = useState([]);
    const [hasMore, setHasMore] = useState(true); 
    const [page, setPage] = useState(1);
    const nav = useNavigate()

    const getTrain = async () => {
        const res = await http.post("/api/trip/train", {
            ...citySlice,
            page: page,
        });
        const { code, data } = res.data;
        if (code === 200) {
            const nData = [...list, ...data];
            setList(nData);
            setPage(page + 1);
            if (data.length < 10) {
                setHasMore(false);
            }
        }
    };
    useEffect(() => {
        getTrain();
    }, [citySlice]);

    function rowRenderer({ index }) {
        const item = list[index];
        return (
            <List.Item
                key={index}
                prefix={<div>{item.startTime}</div>}
                onClick={() => {
                    nav('/ticket', {state: item})
                }}
            >
                <div className="query_list_item">
                    <span>
                        <AddCircleOutline className="start_icon" />
                        {item.start}
                    </span>
                    <span>G103</span>
                    <span>￥ {item.tick.secondTick}</span>
                    <span>
                        <ClockCircleOutline className="end_icon" />
                        {item.end}
                    </span>
                    <span>5时38分</span>
                    <span>{item.isSeat ? "有座" : "无座"}</span>
                </div>
            </List.Item>
        );
    }

    return (
        <div className="query_list_box">
            <PullToRefresh
                onRefresh={() => {
                    setList([]); 
                    setPage(1); 
                    getTrain(); 
                }}
            >
                <List>
                    <AutoSizer disableHeight>
                        {({ width } ) => (
                            <VirtualizedList
                                rowCount={list.length} // 设置总条数
                                rowRenderer={rowRenderer}
                                width={width}
                                height={560}
                                rowHeight={60}
                                overscanRowCount={10}
                            />
                        )}
                    </AutoSizer>
                </List>
                <InfiniteScroll
                    threshold={0}
                    loadMore={getTrain}
                    hasMore={hasMore}
                />
            </PullToRefresh>
        </div>
    );
}

export default React.memo(TableList);
